<template>
  <div class="popup_operate" v-if="visible">
    <div class="operate_box">
        <div class="operate_item" :class="{'is_disable': calcType(r) && r[props.disabled]}" v-for="(r, i) in options" :key="i" @click="operateClick(r)">
            <slot>{{calcType(r) ? r[props.label] : r}}</slot>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        options: {
            type: Array,
            default: false
        },
        props: {
            type: Object,
            default: () => {
                return {
                    label: 'label',
                    value: 'value',
                    disabled: 'disabled'
                }
            }
        }
    },
    computed: {
        calcType() {
            return (value) => {
                return typeof(value) == 'object'
            }
        }
    },
    methods: {
        operateClick(r) {
            if(this.calcType(r) && r[this.props.disabled]) {
                return;
            }
            this.$emit("click", r);
        }
    }
}
</script>

<style scoped>
.popup_operate {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    position: fixed;
    top: 0;
    left: 0;
}

.operate_box{
    width: 333.33px;
    height: fit-content;
    background: #ffffff;
    border-radius: 10.42px;
    line-height: 52.08px;
    font-size: 16.67px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    text-align: center;
    color: #333333;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.operate_item {
    height: 52.08px;
    position: relative;
}
.operate_item:not(:last-child)::before{
    display: block;
    width: 333.33px;
    height: 0.35px;
    background: #dddddd;
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
}
.is_disable{

}
</style>